<template>
	<view class="container" :style="{paddingTop: `${getSystemInfo.navBarHeight}px`}">
		
		<navBar :title="itemType === '2' ? '法律援助' : '教育援助'" />
		
		<view class="info-content">
			<image class="content" :src="info.itemDetailImg" mode=""></image>
			
			<image
				v-if="info.phone && info.phone.length"
				@click="handleCall"
				class="ic_call"
				src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/care/ic_call.png"
				mode=""
			></image>
		</view>
		
		<view class="c-action">
			<u-button text="我要报名" @click.stop="handleApply" v-if="itemType === '3' && info.enrollFlag" :disabled="!info.consultFlag"></u-button>
			<u-button type="primary" text="在线咨询" @click.stop="handleAction" :disabled="!info.consultFlag"></u-button>
		</view>
		
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import { mapGetters } from 'vuex'
	
	export default {
		components: {
			navBar
		},
		data() {
			return {
				info: {},
				itemType: '2' ,// 2-法律援助， 3-教育援助
				itemId: ''
			};
		},
		onLoad(query){
			const { itemType, itemId } = query
			this.itemType = itemType
			this.itemId = itemId
			this.getDetail(itemType)
		},
		computed: {
			...mapGetters('global', ['getSystemInfo']),
		},
		methods: {
			handleCall(){
				// 区分设备
				if(uni.getSystemInfoSync().osName === 'ios'){
					uni.makePhoneCall({
						phoneNumber: this.info.phone
					})
				}else {
					uni.showModal({
						title: "拨打电话",
						content: this.info.phone,
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if(res.confirm){
								uni.makePhoneCall({
									phoneNumber: this.info.phone
								})
							}
						}
					})
				}
			},
			handleApply(){
				uni.navigateTo({
				  url: `/carePack/aid/apply?itemId=${this.itemId}`
				})
			},
			async handleAction(){
				// 选择的是法律援助，需要判断会员等级为vip及以上
				if(this.itemType === '2'){
					const flag = await this.checkQua(this.itemType)
					if(flag){
						uni.navigateTo({
						  url: `/carePack/leaveMessage/lawConsult?itemType=${this.itemType}&itemId=${this.itemId}&source=aid`
						})
					}else {
						uni.showToast({
							title: '您还不是VIP用户，暂无法使用该项功能',
							icon: 'none'
						})
					}
				}else{
					// 教育援助
					uni.navigateTo({
					  url: `/carePack/leaveMessage/educationConsult?itemType=${this.itemType}&itemId=${this.itemId}&source=aid`
					})
				}
			},
			// 获取项目咨询资格
			checkQua(itemType){
				return new Promise((resolve, reject) => {
					this.$request({
						method: 'GET',
					  url: '/ltb-center/loveitem/app/validConsultPerm',
						data: {
							itemType
						}
					}).then(res => {
						resolve(res.datas)
					}).catch(res => {
						reject(res.datas)
					})
				})
			},
			async getDetail(itemType){
				const res = await this.$request({
					method: 'GET',
				  url: '/ltb-center/loveitem/app/getPublishItem',
					data: {
						itemType
					}
				})
				this.info = res.datas
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	padding-bottom: 120rpx;
	.info-content {
		width: 100%;
		height: 100%;
		.content {
			width: 100%;
			height: 100%;
		}
		.ic_call {
			position: fixed;
			right: 28rpx;
			bottom: 126rpx;
			width: 112rpx;
			height: 112rpx;
			border-radius: 50%;
			// box-shadow: 0rpx 1rpx 6rpx 0rpx rgba(0, 0, 0, 0.16);
		}
	}
	
	.c-action {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		// margin-top: 20rpx;
		height: 100rpx;
		width: 100%;
		box-sizing: border-box;
		font-size: 18px;
		/deep/ .u-button {
			display: inline-block;
			height: 100%;
			line-height: 100rpx;
			border-radius: none;
			// &:nth-child(1){
			// 	color: #CF1A1B;
			// }
		}
	}
}
</style>
